<template>
  <view class="right" :style="{top: top, bottom: '101rpx' }">
    <view class="condition">
      <view class="item" @click="handleOrder('sell')" :class="{'active': selectedOrder === 'sell'}">销量</view>
      <view class="item" @click="handleOrder('price')" :class="{'active': selectedOrder === 'price'}">
        价格
        <view class="icon">
          <u--image width="18rpx" height="11rpx" :src="baseUrl + getUp" class="up" />
          <u--image width="18rpx" height="11rpx" :src="baseUrl + getDown" class="down" />
        </view>
      </view>
    </view>
    <view class="product" v-if="list.length > 0">
      <view class="item" v-for="item in list" :key="item.id" @click="goProduct(item)">
        <u--image width="160rpx" height="160rpx" :src="baseUrl + item.mainImage.path" v-if="item.mainImage" />
        <view class="desc">
          <view class="title">{{item.title}}</view>
          <view class="title_sub">{{item.title_sub}}</view>
          <v-price :product="item" />
        </view>
      </view>
    </view>
    <view class="product" v-if="!list || list.length === 0">
      <view class="nothing" v-if="showNothing">暂无相关商品...</view>
    </view>
  </view>
</template>

<script>
import config from '../../../../config/config'
import Price from '../../../../components/price/index'

export default {
  props: ['list', 'navBar', 'showNothing'],
  components: {
    'v-price': Price,
  },
  data() {
    return {
      /**
       * 主容器定位
       */
      //#ifdef  MP-WEIXIN
      top: (this.navBar.statusBarHeight + this.navBar.navHeight) * 2 + 120 + 'rpx',
      //#endif
      //#ifdef  APP-PLUS
      top: (this.navBar.statusBarHeight + this.navBar.navHeight) * 2 + 95 + 'rpx',
      //#endif
      //#ifdef  H5
      top: (this.navBar.statusBarHeight + this.navBar.navHeight) * 2 + 160 + 'rpx',
      //#endif
      baseUrl: config.baseUrl,
      up: '/mini/bg/up.png',
      upActive: '/mini/bg/up-active.png',
      down: '/mini/bg/down.png',
      downActive: '/mini/bg/down-active.png',
      selectedOrder: '',
      selectedOrderArr: '',
    }
  },
  computed: {
    getUp() {
      let up = this.up
      if (this.selectedOrderArr === 'up') {
        up = this.upActive
      }
      return up
    },
    getDown() {
      let down = this.down
      if (this.selectedOrderArr === 'down') {
        down = this.downActive
      }
      return down
    }
  },
  methods: {
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    },
    // 排序
    handleOrder(text) {
      if (text === 'sell') {
        this.selectedOrder = this.selectedOrder === 'sell' ? '': 'sell'
        this.selectedOrderArr = ''
      }
      if (text === 'price') {
        if (this.selectedOrderArr === '') {
          this.selectedOrderArr = 'up'
          this.selectedOrder = 'price'
        }else if (this.selectedOrderArr === 'up') {
          this.selectedOrderArr = 'down'
          this.selectedOrder = 'price'
        }else if (this.selectedOrderArr === 'down') {
          this.selectedOrderArr = ''
          this.selectedOrder = ''
        }
        // console.log(this.selectedOrderArr)
      }
      this.$emit('handleOder', {
        text: this.selectedOrder,
        arrow: this.selectedOrderArr
      })
    }
  }
}
</script>

<style scoped lang="scss">
.right {
  left: 220rpx;
  right: 0;
  position: fixed;
  z-index: 11;
  background: white;
  //overflow-y: auto;
  box-sizing: border-box;
  padding: 20rpx;
  // iso 13底部
  padding-bottom: 80rpx;
  .condition {
    height: 50rpx;
    //background: black;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20rpx;
    .item {
      font-size: 24rpx;
      width: 120rpx;
      display: flex;
      align-items: center;
      color: #999999;
      justify-content: center;
      &.active {
        color: $main_color;
      }
      .icon {
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        //justify-content: center;
        //background: black;
        height: 28rpx;
        .up {
        }
        .down {
        }
      }
    }
  }
  .product {
    .nothing {
      color: #cccccc;
      font-size: 24rpx;
    }
    //background: red;
    overflow-y: auto;
    height: calc(100% - 50rpx);
    .item {
      display: flex;
      margin-bottom: 50rpx;
      .desc {
        flex: 1;
        //background: red;
        box-sizing: border-box;
        padding: 0 20rpx;
        .title {
          font-size: 28rpx;
          font-weight: 700;
        }
        .title_sub {
          margin: 20rpx 0;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>
